<template>
  <div>
    <el-form :inline="true" :model="queryForm" @keyup.enter.native="getDataList()">
      <el-form-item label="帮扶对象姓名">
        <el-input v-model="queryForm.real_name" maxlength="10" placeholder="帮扶对象姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="queryForm.phone" type="number" oninput="if(value.length>11)value=value.slice(0,11)" maxlength="11" placeholder="手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="推荐时间">
        <el-date-picker v-model="timeArr" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" @change="timeChange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList('reset')">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
        <el-button icon="el-icon-top" @click="exportData()">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column align="center" label="序号" width="180">
        <template slot-scope="scope">
          <span>{{(queryForm.page - 1) * queryForm.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="real_name" header-align="center" align="center" label="帮扶对象姓名">
      </el-table-column>
      <el-table-column prop="phone" header-align="center" align="center" label="联系电话">
      </el-table-column>
      <el-table-column prop="sex" header-align="center" align="center" label="性别">
        <template slot-scope="{row}">
          {{row.sex===0?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column prop="age" header-align="center" align="center" label="年龄">
      </el-table-column>
      <el-table-column prop="id_number" header-align="center" align="center" label="身份证号">
      </el-table-column>
      <el-table-column prop="item_name" header-align="center" align="center" label="所在地区">
        <template slot-scope="{row}">
          {{row.province_name}}{{row.city_name}}{{row.area_name}}
        </template>
      </el-table-column>
      <el-table-column prop="address" header-align="center" align="center" show-overflow-tooltip label="详细地址">
      </el-table-column>
      <el-table-column prop="explanation" header-align="center" align="center" show-overflow-tooltip label="申请原由">
      </el-table-column>
      <el-table-column prop="create_time" header-align="center" align="center" label="推荐时间" width="100">
      </el-table-column>
      <el-table-column prop="status" header-align="center" align="center" label="状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.status===0">待联系</el-tag>
          <el-tag v-if="row.status===1" type="success">已联系</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="{row}">
          <el-button type="text" size="small" v-if="row.status===1" @click="openDialog(row,'details')">查看详情</el-button>
          <el-button type="text" size="small" v-if="row.status===0" @click="openDialog(row,'submit')">确认联系</el-button>
          <el-button type="text" size="small" @click="delItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="queryForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryForm.limit" :total="total" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 审核弹窗 -->
    <el-dialog title="详情" :visible.sync="visible" top="5vh" width="60%" center @close="handleClose">
      <el-form ref="form" v-loading="formLoading" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="帮扶对象姓名：" prop="study_type_name">{{form.real_name}}</el-form-item>
        <el-form-item label="联系电话：" prop="study_type_name">{{form.phone}}</el-form-item>
        <el-form-item label="性别：" prop="study_type_name">{{form.sex===0?'男':form.sex===1?'男':''}}</el-form-item>
        <el-form-item label="年龄：" prop="study_type_name">{{form.age}}</el-form-item>
        <el-form-item label="身份证号：" prop="study_type_name">{{form.id_number}}</el-form-item>
        <el-form-item label="所在地区：" prop="study_type_name">{{form.province_name}}{{form.city_name}}{{form.area_name}}</el-form-item>
        <el-form-item label="详细地址：" prop="study_type_name">{{form.address}}</el-form-item>
        <el-form-item label="申请原由：" prop="study_type_name">{{form.explanation}}</el-form-item>
        <el-form-item label="推荐时间：" prop="study_type_name">{{form.create_time}}</el-form-item>
        <el-form-item label="状态：" prop="study_type_name">
          <el-tag v-if="form.status===0">待联系</el-tag>
          <el-tag v-if="form.status===1" type="success">已联系</el-tag>
        </el-form-item>
        <el-form-item label="推荐人姓名：" prop="contacts">{{form.contacts}}</el-form-item>
        <el-form-item label="联系电话：" prop="contact_number">{{form.contact_number}}</el-form-item>
        <h4>联系情况</h4>
        <el-form-item v-if="type=='submit'" label="反馈结果：" prop="study_type_name">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.feedback" maxlength="300">
          </el-input>
        </el-form-item>
        <el-form-item v-if="type=='details'" label="反馈结果：" prop="study_type_name">{{form.feedback}}</el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">返 回</el-button>
        <el-button type="primary" v-if="type=='submit'" :loading="btnLoading" @click="submit">确认处理</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import recommendApi from '@/api/recommendApi.js'
export default {
  data () {
    return {
      queryForm: {
        limit: 10,
        page: 1,
      },
      total: 0,
      dataList: [],
      dataListLoading: false,
      form: {},
      rules: {},
      visible: false,
      btnLoading: false,
      timeArr: [],
      formLoading: false,
      type: null
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    getDataList (reset) {
      if (reset) this.queryForm.page = 1;
      this.dataListLoading = true;
      recommendApi.assistPage(this.queryForm).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list;
          this.total = res.data.page.totalCount;
        }
        this.dataListLoading = false;
      })
    },
    reset () {
      this.queryForm = {
        limit: 10,
        page: 1,
      };
      this.timeArr = [];
      this.getDataList()
    },
    handleClose () {
      this.visible = false
    },
    timeChange (e) {
      if (e && e.length > 0) {
        this.queryForm.create_time_start = e[0];
        this.queryForm.create_time_end = e[1];
      } else {
        this.queryForm.create_time_start = null;
        this.queryForm.create_time_end = null;
      }
    },
    // 打开弹窗
    openDialog (item, type) {
      this.visible = true;
      this.form = {};
      this.type = type;
      this.getDetails(item.id)
    },
    // 获取详情
    getDetails (id) {
      this.formLoading = true;
      recommendApi.assistInfo(id).then(res => {
        if (res && res.data.code == 200) {
          this.form = res.data.data;
          this.formLoading = false;
        }
      })
    },
    // 提交
    submit () {
      if (!this.form.feedback) {
        this.$message.error('请输入反馈！');
        return
      }
      this.btnLoading = true;
      recommendApi.assistContact(this.form).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('提交成功！');
          this.getDataList();
          this.handleClose()
          this.btnLoading = false;
        }
      })
    },
    // 导出
    exportData () {
      let string = "?token=" + Vue.cookie.get('token')
      for (let v in this.queryForm) {
        console.log(v)
        if (v !== 'limit' && v !== 'page') {
          string += ('&' + v + '=' + this.queryForm[v])
        }
      }
      window.location.href = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : $config.SERVER_URL) + "/admin/recommend/assist/export" + string
    },
    // 删除
    delItem (item) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        recommendApi.assistDelete(item.id).then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getDataList()
          }
        })
      }).catch(() => { });
    },
    // 每页数
    sizeChangeHandle (val) {
      this.queryForm.limit = val
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.queryForm.page = val
      this.getDataList()
    },
  }
}
</script>

<style>
.el-form--inline .el-form-item__content {
  width: auto !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>
<style>
</style>